import React, {useEffect} from "react";
import SideMenu from "../../components/NewsSandBox/SideMenu";
import TopHeader from "../../components/NewsSandBox/TopHeader";
import {Outlet} from "react-router-dom";
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

import './index.css'

import {Layout, Spin} from "antd"
import {connect} from "react-redux";
import {changeLoading} from "../../redux/action/loading";

const {Content } = Layout;

function NewsSandBox(props) {
    // console.log(props)
    NProgress.start()
    useEffect(()=>{
        NProgress.done()
    })
    return (
        <Layout>
            <SideMenu/>
            <Layout className="site-layout">
                <TopHeader/>
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        overflow: "auto"
                    }}
                >
                    <Spin size = "large" spinning={props.isLoading}>
                        <Outlet />
                    </Spin>
                </Content>
            </Layout>
        </Layout>
    )
}

export default connect(
    state => ({
        isLoading: state.LoadingReducer.isLoading
    }),
    {changeLoading}
)(NewsSandBox)